import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import store from '@/store';

import Home from "@/views/home/home.vue"

/* 按需加载: 访问路径时加载；prefetch 预加载缓存 */
const Recipe = () => import('@/views/recipesDaQuan/recipes.vue')
const CreateRecipe = () => import('@/views/createRecipe/create.vue')
const Detail = () => import('@/views/detail/detail.vue')
const Login = () => import('@/views/login/login.vue')
const Register = () => import('@/views/login/register.vue')

/* 统一分组的文件打包到一个 js文件 */
const UserSpace = () => import(/* webpackChunkName:"user-space" */ '@/views/user/space.vue')
const EditUser = () => import(/* webpackChunkName:"user-space" */ '@/views/user/edit.vue')
const MenuList = () => import(/* webpackChunkName:"user-space" */ '@/views/user/menu-list.vue')
const FansList = () => import(/* webpackChunkName:"user-space" */ '@/views/user/fans-list.vue')

const viewRoutes = [
  {
    path: '/recipe',
    name: 'recipe',
    title: '菜谱大全',
    component: Recipe
  },
  {
    path: '/createRecipe',
    name: 'createRecipe',
    title: '发布菜谱',
    component: CreateRecipe,
    meta: {
      login: true
    }
  },
  {
    path: '/detail/:menuId',
    name: 'detail',
    title: '菜谱详情',
    component: Detail
  },
  {
    path: '/edit',
    name: 'useredit',
    title: '编辑个人资料',
    component: EditUser,
    meta: {
      login: true
    }
  },
  {
    path: '/space',
    name: 'space',
    title: '个人空间',
    component: UserSpace,
     redirect: {
       name: 'works'
     },
    meta: {
      login: true
    },
    children: [
      {
        path: 'works',
        name: 'works',
        title: '作品',
        component: MenuList,
        meta: {
          login: true
        }
      },
      {
        path: 'fans',
        name: 'fans',
        title: '粉丝',
        component: FansList,
        meta: {
          login: true
        }
      },
      {
        path: 'following',
        name: 'following',
        title: '我的关注',
        component: FansList,
        meta: {
          login: true
        }
      },
      {
        path: 'collection',
        name: 'collection',
        title: '收藏',
        component: MenuList,
        meta: {
          login: true
        }
      }
    ]
  }
];

const routes = [
  {
    path: '/',
    name: 'home',         //命名路由
    title: '首页',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    title: '登录页',
    component: Login,
    /* meta: {                  // 路由元信息
      login: true
    } */
  },
  {
    path: '/register',
    name: 'register',
    title: '注册页',
    component: Register,
  },
  ...viewRoutes,
  {
    path: '*',
    name: 'notFound',
    title: '未找到',
    redirect: {
      name: 'home'
    }
  }
];

const router = new VueRouter({
  mode: "history",
  // base: process.env.BASE_URL,
  routes,
});

import { getUserInfo } from '@/service';  // 获取用户信息

/* 全局前置守卫：登录验证 */
router.beforeEach(async (to, from, next) => {

  const loginInfo = await getUserInfo();   // 每次请求都会携带token，向后端验证 token 的合法性
  const unLogin = loginInfo.error === 400; // 未登录状态
  // 更新 store 中存储的用户信息
  store.commit("changeUserInfo", loginInfo.data);


  if (to.matched.some(item => item.meta.login) && unLogin) {  // some 至少有一个需要登录
    // console.log('需要登录')
    next({
      name: 'login'
    })
  } else {
    if (!unLogin && to.name === "login") {
      next({
        name: 'home'
      });
    }
    next();
  }
})

export default router;
